<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Scrabble :: Create Game</title>
    <link rel="stylesheet" href="{{ STATIC_URL }}uni_form/uni-form.css" type="text/css" />
    <link rel="stylesheet" href="{{ STATIC_URL }}uni_form/default.uni-form.css" type="text/css" />
    <script type="text/javascript" src="{{ STATIC_URL }}scripts/jquery.min.js"></script>
    <script src="{{ STATIC_URL }}uni_form/uni-form.jquery.js" type="text/javascript"></script>
  </head>
  <body>
{% load uni_form_tags %}
    <div style="margin: 0 auto; width: 500px;">
    <form action="{% url game-create %}" method="post" class="uniForm">
      <div class="header">
        <h2>Create Game</h2>
        <p>Pick atleast one other person to play with.</p>
      </div>
      {% csrf_token %}
      {% uni_form form helper %}
    </form>
    </div>

    <script type="text/javascript">
<!--
var friends = {{ friends|safe }};
for (var i = 2; i <= 4; i++) {
    var select = $('#id_player' + i);
    select.append('<option value="" selected="selected">---------</option>\n');
    for (var pk in friends) {
        select.append('<option value="' + pk + '">' + friends[pk] + '</option>\n');
    }
}
// -->
    </script>
  </body>
</html>
